feat: gbfs validator front page styling#1411
Conversation
|
*Lighthouse ran on https://mobility-feeds-dev--pr-1411-p9u29zfz.web.app/ * (Desktop)
*Lighthouse ran on https://mobility-feeds-dev--pr-1411-p9u29zfz.web.app/feeds * (Desktop)
*Lighthouse ran on https://mobility-feeds-dev--pr-1411-p9u29zfz.web.app/feeds/gtfs/mdb-2126 * (Desktop)
*Lighthouse ran on https://mobility-feeds-dev--pr-1411-p9u29zfz.web.app/feeds/gtfs_rt/mdb-2585 * (Desktop)
*Lighthouse ran on https://mobility-feeds-dev--pr-1411-p9u29zfz.web.app/gbfs/gbfs-flamingo_porirua * (Desktop)
|
|
Preview Firebase Hosting URL: https://mobility-feeds-dev--pr-1411-p9u29zfz.web.app |
| The GBFS Validator & Visualizer is an open-source tool. We | ||
| welcome contributions from the community — whether through | ||
| feature improvements, testing, or documentation. Special | ||
| thanks to{' '} |
Alessandro100
force-pushed
the
feat/160-gbfs-validator-front-page
branch
from
46fc813 to
520cca2
Compare
There was a problem hiding this comment.
Pull Request Overview
This PR implements the front-end styling and layout improvements for the GBFS Validator page, making it responsive across different screen sizes and compatible with both light and dark themes. The changes focus on visual presentation, accessibility enhancements, and improved navigation with functional links.
Key changes:
- Added responsive layout components and styling for the validator landing page
- Implemented functional navigation links to external resources and internal pages
- Enhanced accessibility with proper ARIA labels and alt text for images
Reviewed Changes
Copilot reviewed 4 out of 4 changed files in this pull request and generated 1 comment.
| File | Description |
|---|---|
| validator.styles.ts | Added new styled components for responsive promotion row layouts |
| index.tsx | Updated hero section, promotion rows with responsive design and functional links |
| GbfsFeedSearchInput.tsx | Added navigation functionality, improved form accessibility, and responsive layout |
| Header.tsx | Added accessibility label to language selector |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
| justifyContent: 'space-between', | ||
| alignItems: 'center', | ||
| mt: 2, | ||
| flexDirection: reverse != null && reverse ? 'row-reverse' : 'row', |
There was a problem hiding this comment.
The null check reverse != null is unnecessary. Since reverse is typed as boolean | undefined, you can simplify this to reverse ? 'row-reverse' : 'row', which will correctly handle undefined, false, and true values.
| flexDirection: reverse != null && reverse ? 'row-reverse' : 'row', | |
| flexDirection: reverse ? 'row-reverse' : 'row', |
Summary:
closes: https://github.com/MobilityData/product-tasks/issues/160
The styling and links for the front page of the gbfs validator
Expected behavior:
The front page of the gbfs validator should look good in any resolution and in dark mode. The links should all work (except View GBFS Validator API docs as it's not made yet)
Testing tips:
Go to 'gbfs-validator' and assure there are no visual bugs (light / dark mode) (desktop / mobile)
Please make sure these boxes are checked before submitting your pull request - thanks!
./scripts/api-tests.shto make sure you didn't break anything